<template>
    <div>
      <div class="content-head" style="margin-bottom: 20px;">
        <div class="sort-keys">
          <a-input placeholder="搜索用户名/手机号" style="width: 180px;margin-right:10px;" v-model="key" allowClear/>
          <a-button type="primary" @click="refreshData" style="margin-right:10px;">刷新</a-button>

        </div>
      </div>
      <!-- {{ids}} -->
      <a-table class="table" borded :rowKey="row => row.id" :dataSource="list"
        :pagination="pagination">
        <a-table-column
          title="登陆用户"
          key="name"
          width="100px"
        >
          <template slot-scope="row">
            <span v-if="row.user">
              <img :src="row.user.headimg" class="headimg">
              {{ row.user.name }}
              <a-tag color="red" style="margin-left:10px;" v-if="row.user.status === 2">已拉黑</a-tag>
            </span>
          </template>
        </a-table-column>
        <a-table-column title="手机" width="60px">
          <template slot-scope="row">
            <div v-if="row.user">{{row.user.phone}}</div>
          </template>
        </a-table-column>
        <a-table-column
          title="兼职人员"
          key="name"
          width="100px"
        >
          <template slot-scope="row">
            <span v-if="row.agent_inviter">
              <img :src="row.agent_inviter.headimg" class="headimg">
              {{ row.agent_inviter.name }}
              <a-tag color="red" style="margin-left:10px;" v-if="row.agent_inviter.status === 2">已拉黑</a-tag>
            </span>
          </template>
        </a-table-column>
         <a-table-column title="24小时内消费" width="60px">
          <template slot-scope="row">
            <div>{{row.order24/100}}</div>
          </template>
        </a-table-column>
        <a-table-column title="总消费" width="60px">
          <template slot-scope="row">
            <div>{{row.orderall/100}}</div>
          </template>
        </a-table-column>
         <a-table-column title="邀请时间" width="60px">
          <template slot-scope="row">
            <div>{{row.invite_at}}</div>
          </template>
        </a-table-column>
         <a-table-column title="最后活跃" width="60px">
          <template slot-scope="row">
            <div v-if="row.user">{{row.user.last_active_at | formatDate}}</div>
          </template>
        </a-table-column>
      </a-table>
    </div>
  </a-modal>
</template>

<script>
  const resourceType = 'users'
   import moment from 'moment'

  export default {
    name: 'Popup',
    components: {},
    props: {
      user_id: 0,
      mode: {
        type: String,
        default () {
          return 'checkbox'
        }
      }
    },
    data() {
      return {
        title: '下级列表',
        isShow: true,
        key: '',
        list: [],
        per_page: 10,
        page: 1,
        total: 0,
        all_total:0 ,
        best_total: 0,
        type: 'robot'
      }
    },
    computed: {
      pagination() {
        return {
          defaultPageSize: this.per_page,
          defaultCurrent: this.page,
          total: this.total,
          onChange: (e) => {
            console.log(e)
            this.page = e
            // this.per_page = e.pageSize
            this.fetchData()
          }
        }
      }
    },
    mounted() {
      this.fetchData()
    },
    watch: {
      key() {
        this.page = 1
        this.fetchData()
      },
      type () {
        this.page = 1
        this.fetchData()
      }
    },
    filters: {
      formatDate (value) {
        return value ? moment(value).fromNow() : ''
      },
      formatDate2 (value) {
        return value ? moment(value).format('YYYY-MM-DD') : ''
      }
    },
    methods: {
      refreshData () {
        this.page = 1
        this.fetchData()
      },
      handleCancel() {
        this.$emit('close')
      },
      fetchData() {
        this.$http.get(`/agents5/invite_log`, {
          params: {
            page: this.page,
            per_page: this.per_page,
            key: this.key,
            direct_inviter_id: this.user_id,
          }
        }).then(res => {
          this.list = res.data.list
          this.total = res.data.item_total
        }).finally(() => {
          this.loading = false
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .table {

    .thumb {
      width: 40px;
      height: 40px;
      object-fit: contain;
    }

    .right {
      margin-left: 10px;
    }

    .title {
      // min-height: 30px;
      min-width: 100px;
      font-weight: 500;
    }

  }


  .marked-tag {
      border-radius: 50px;
      border: 1px solid #666;
      font-size: 10px;
      padding: 1px 6px;
      color: #666;
      cursor: pointer;
      margin-right: 6px;

      &.actived {
        background: #666;
        color: white;
      }
    }


    .sort-keys {
      display: flex;
      align-items: center;

      .tab-list {
        display: flex;
        margin-top: 6px;
        border-bottom: 1px solid #e1e1e1;
        margin-right: 50px;

        .item {
          margin-right: 30px;
          padding: 0px 10px 4px 10px;
          cursor: pointer;
          font-weight: 500;

          &.actived {
            color: #1890FF;
            border-bottom: 3px solid #1890FF;
          }

          &:hover {
            color: #1890FF;
          }
        }
      }

    }

  .inviter-headimg {
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }

  .content-head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .table {
    background-color: #fff;
    .user {
      display: flex;
      // flex-wrap: wrap;
      align-items: center;
      img {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border: 1px solid #e1e1e1;
        margin-right: 6px;
        border-radius: 50%;
        overflow: hidden;
      }
      .gender-man, .gender-woman {
        margin-left: 5px;
        font-size: 12px;
      }
      .gender-man {
        color: #409EFF;
      }
      .gender-woman {
        color: #F56C6C;
      }
    }
  }
  .headimg {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }
</style>
